<template>
	<view class="login-wrapper">
		<image class="login-bg" src="../../static/images/login-bg.png" mode="scaleToFill"></image>
		<view class="login-form">
			<view class="title">彭世菇业订单系统管理平台</view>
			<form class="form" @submit="formSubmit" >
					 <view class="item">
						 <uni-icons class="uni-icon" type="zhanghaoguanli" size="24" color="rgba(166,174,181,.8)" ></uni-icons>
						 <input class="input" type="text" v-model.trim="loginName" placeholder="请输入账号" name="loginName" maxlength="20"/>
					 </view>
					 <view class="item">
						 <uni-icons class="uni-icon" type="account_pwd" size="24" color="rgba(166,174,181,.8)" ></uni-icons>
						 <input class="input" password type="text" v-model.trim="password" placeholder="请输入密码" name="password" maxlength="20"/>
					 </view>
			          <view class="sub-btn">
						  <button :loading = "isLoading" form-type="submit" class="login">登录</button>
					  </view>
			</form>
		</view>
	</view>
</template>

<script>
	import Utils from '@/common/utils.js'
	import Request from '@/request/request.js'
	import uniIcons from '@/components/uni-icon/uni-icon.vue'
	export default {
		components:{
			uniIcons
		},
		data() {
			return {
				isLoading:false,
				loginName:'',
				password:''
			}
		},
		onLoad(options) {
			
			this.loginName = uni.getStorageSync('loginName') || ''
			this.password = uni.getStorageSync('password') || ''
			
			if(this.loginName && this.password){
				let params = {
					loginName:this.loginName,
					password:this.password
				}
				this.login(params)
			}
		},
		onShow() {
			
		},
		methods: {
			formSubmit: function(e) {
				if(this.isLoading) return
				let formdata = e.detail.value
				if(!formdata.loginName || !formdata.password){
					uni.showToast({
						icon:"none",
					    title: '请输入用户名或密码 !',
					    duration: 1000
					});
					return;
				}
				let params = {
					loginName:Utils.trim(formdata.loginName),
					password:Utils.trim(formdata.password)
				}
				console.log(params)
				this.login(params)
			},
			login(params){
				this.isLoading = true
				Request({
					url:'login',
					method:'POST',
					data:params
				})
				.then(res =>{
					this.isLoading = false
					console.log(res)
					if(res.code == 0){
						let {data} = res
						console.log(data)
						//登录成功后保存账号密码
						this.isRemember(params.loginName,params.password)
						let userInfo = {
							userName:data.userName,
							avatar:data.avatar,
							roleFlag:data.roleFlag,
							userId:data.userId
						}
						console.log(data.roleFlag)
						this.$store.commit('SET_CUS_TYPE',data.roleFlag)
						this.$store.commit('SET_USER_INFO',userInfo)
						if(data.roleFlag == 3){//客户登录
							this.$store.commit('SET_CUSTOMER_INFO',data.customer)
						}
						try {
							uni.setStorageSync('authorization',data.authorization );
						} catch (e) {
						    // error
						}
						// 先注释
						uni.switchTab({
							url:'/pages/home/home'
						})
					}else{
						uni.showToast({
						    title: res.msg,
							icon:'none',
						    duration: 1400
						})
						return
					}
				}).catch(err =>{this.isLoading = false})
			},
			isRemember(loginName,password){
				try {
				    uni.setStorageSync('loginName',loginName)
					uni.setStorageSync('password',password)
				} catch (e) {
				    // error
				}
			}
		}
	}
</script>

<style lang="less" scoped>
.login-wrapper{
	height: 100%;
	width: 100%;
	display: flex;
	position: relative;
	.login-bg{
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: -1;
	}
	.login-form{
		width: 74%;
		margin: 340rpx auto 0;
		.title{
			color: #000;
			line-height: 120rpx;
			text-align: center;
			font-size: 18px;
			font-weight: 600;
			text-shadow: 2rpx 2rpx 4rpx #FFFFFF,-2rpx -2rpx 4rpx #FFFFFF;
		}
		.form{
			.item{
				margin: 0 0 40rpx;
				position: relative;
				.uni-icon{
					position: absolute;
					top:16rpx;
					left: 36rpx;
				}
			}
			.input{
				height: 80rpx;
				line-height: 40rpx;
				border: 1px solid rgb(153, 170, 251);
				// border-radius: 8rpx;
				padding-left: 100rpx;
				background-color: #FFFFFF;
				
			}
		}
		.login{
			background-color: #1670F7;
			opacity: .7;
			color: #FFFFFF;
		}
	}
}
</style>
